<template>
  <el-menu
    class="sider-navs"
    router
    unique-opened
    :default-active="defaultActivePath"
    :collapse="isCollapse"
  >
    <template v-for="menu in navs">
      <MenuTree :menu="menu"></MenuTree>
    </template>
  </el-menu>
</template>
<style lang="scss">
.el-popper .el-menu-item {
  height: 40px;
}
.sider-navs {
  width: 200px;
  background-color: transparent !important;
  &.el-menu,
  .el-menu {
    --el-menu-item-height: 40px;
    background-color: transparent !important;
    border-right: none;
    user-select: none;
  }
  .el-sub-menu__title {
    height: 40px;
    background-color: transparent !important;
  }
  .el-sub-menu .el-menu-item {
    height: 40px;
    line-height: 40px;
    background-color: transparent !important;
  }
  .el-menu-item.is-active {
    background: #e6f7ff !important;
    border-right: 3px solid #208bff;
    transition: 0.3s;
  }
}
</style>
<script lang="ts" setup>
import MenuTree from "./MenuTree.vue";
import { useMenuNavs } from "@/hooks/layout/useMenuNavs";
type PropsType = {
  collapse: boolean;
};
// ts 带默认值类型写法
const props = withDefaults(defineProps<PropsType>(), {
  collapse: false,
});
const { navs, defaultActivePath, isCollapse } = useMenuNavs(props);
</script>
